@import "var.less";
*{
	padding: 0;
	margin: 0;
	font-size: inherit;
}
html {
	font-size: 20px;
}
body {
	font-size: 0.6rem;
	font-family: 'Microsoft YaHei';
}
.oc-dialog,.oc-alert,.oc-file{
	/* Default dialog size */
	width: @defaultWidth;
	height: @defaultHeight;
	overflow: hidden;
	border: 1px @borderColor solid;
	box-shadow: 0px 0px 10px 2px @shadowColor;
	position: fixed;
	background-color: #fff;
	z-index: 1;
	&>header{
		width: 100%;
		height: @heard-h;
		line-height: @heard-h;
		label{
			margin-left: 0.35rem;
			font-size: 0.6rem;
		}
		hr{
			float: left;
			//margin-top: 0.15rem;
			width: 0;
			margin-top:  (@heard-h - 0.6)*0.5;
			margin-left: 0.35rem;
			height: 0.6rem;
			border: none;
			border-left: 1px solid @hrColor;
		}
		i,button{
			display: block;
			width: @button-h-20;
			height: @button-h-20;
			overflow: hidden;
  			position: relative;
			float: left;
			margin-top:  (@heard-h - @button-h-20)*0.5;
			margin-left: 0.3rem;
			background-position: center;
			background-repeat: no-repeat;
		}
	}
	&>nav{
		position:absolute;
		right:  0;
		top: 0;
		height: @heard-h;
		button{
			display: block;
			width: 2.25rem;
			height:1.5rem;
			position: static;
			float: left;
			background-position: center;
			background-color: transparent;
			border: none;
			&:hover{
				background-color:@bottonBG;
			}
		}
		button.danger:hover{
			background-color:@dangerHoverColor;
		}
		&:after{
			content: "";
			display: block;
			clear: both;
		}
	}
	&>section{
		width: 100%;
		height: auto;
		position: absolute;
		top: @heard-h;
		bottom: 0;
		>*{
			position: absolute;
		}
	}
}
.oc-dialog.full {
	border: none;
	width: 100%;
	height: 100%;
	box-shadow: none;
	&> header{
		height:@max-heade-h;
		line-height: @max-heade-h;
		button,i,hr{
			margin-top: 0.1rem;
		}
		hr{
			position: relative;
			top: 0.2rem;
		}
	}
	&>nav{
		height: @max-heade-h;
		button{
			height: @button-h-22;
		}
	}
	&>section{
		top: @max-heade-h;
	}
}
/*block*/
.oc-dialog.block:after{
	content: "";
	position:absolute;
	display: block;
	width: 120%;
	height: 120%;
	top: -10%;
	left: -10%;
	background-color:rgba(153, 153, 153,0.3);
	z-index: 50;
}
/* Default alert size */
.oc-alert{
	width:@minAlertWidth;
	height: @minAlertHeight;
	section{
		background-color: #f0f0f0;
		text-align: center;
		p{
			left: 0.3rem;
			right: 0.3rem;
			top: 0.6rem;
			bottom: 2rem;
			text-align: center;
		}
		button{
			height:1.4rem;
			width:4.4rem;
			bottom: 0.3rem;
			left: 50%;
		}
		.confirm{
			margin-left: -4.6rem;
		}
		.cancel{
			margin-left: 0.2rem;
		}
	}
}
.oc-file{
	width: 24rem;
	height: 16rem;
	&>section{
		input{
			width: 20rem;
			bottom: 0.3rem;
			left: 0.3rem;
		}
		button{
			width: 3rem;
			height: 1.1rem;
			bottom: 0.3rem;
			right: 0.3rem;
		}
		>.oc-data-list{
			top: 1.5rem;
			left: 0px;
			right: 0px;
			border-bottom: 1px solid rgb(204, 204, 204);
			height: 226px;
		}
	}
}
.grid{
	width: 100%;
	height: 100%;
	>*{
		position: absolute;
	}
}
